<template>
  <div>
    <el-container>
      <el-header height="60px">
        <Header :isCollapse.sync="isCollapse"></Header>
      </el-header>
      <el-container>
        <el-aside style=" transition: all .2s ease;" :width="isCollapse?'64px':'200px'">
          <div class="left_menu_wrap">
            <LeftMenu :isCollapse="isCollapse"></LeftMenu>
          </div>
        </el-aside>
        <el-main>
          <div class="content">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
        <!-- <el-footer>Footer</el-footer> -->
    </el-container>
  </div>
</template>

<script>
import Header from "./Header";
import LeftMenu from "./LeftMenu";
export default {
  data() {
    return {
      isCollapse:false
    };
  },
  methods: {},
  components: {
    LeftMenu,
    Header,
  },
};
</script>

<style  lang='scss' scoped>
.left_menu_wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: #fff;
}

.left_menu_wrap {
  width: 200px;
  position: fixed;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.content {
  // display: flex;
  // margin-left: 200px;
  transition: all .1s ease;
}
</style>
